<template>
  <v-layout>
    <template #header>
      <el-date-picker
        v-model="tableQuery.timeRange"
        type="datetimerange"
        range-separator="-"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="YYYY-MM-DD HH:mm:ss"
        @change="getDiviverList"
      />
    </template>
    <v-table
      url="/divideOrder/getDivideOrderList"
      ref="tableRef"
      :query="tableQuery"
    >
      <v-column auto prop="scName" label="学校名称"></v-column>
      <v-column auto prop="code" label="分单编号"></v-column>
      <v-column auto label="操作">
        <template #default="{ row }">
          <el-button size="small" @click="toOp(row)">详情</el-button>
        </template>
      </v-column>
    </v-table>
    <v-dialog v-model="detailVisible" title="详情" width="1000px" @printbtn="printlist"
     :showExport ='showExport'  confirmText="导出" @confirm="exportbtn">
      <el-table :data="detailList" style="width: 100%" height="550" >
        <el-table-column prop="name" label="商品名称" width="150" />
        <el-table-column prop="format" label="规格" width="150" />
        <el-table-column prop="cunit" label="单位" width="120" />
        <el-table-column prop="price" label="价格" width="150" />
        <el-table-column prop="num" label="数量" width="150" />
        <el-table-column prop="vendorid" label="供应商" width="120" />
      </el-table>
    </v-dialog>
    <div id="printDiv">
      <table style="margin-top: 0.5rem;">
              <tbody >
                <tr  v-for="(item,index) in arrdata " :key = "index">
                  <td style="width: 5%; text-align: center;border-bottom: 1px solid gray;border-right: 1px solid gray"  :colspan="it.colspan"
                  v-for="(it,index) in item.numberdata " :key = "index" >{{ it.tape }}</td>
                </tr>
              </tbody>
      </table>
    </div>
   
    
  </v-layout>
</template>

<script setup lang="ts">
import { useTable } from "@/components/table/useTable";
import { queryDivideOrderList,exportlist } from "@/api/user";
import type { divideDetailData } from "@/api/user/model";
import { markRaw, reactive, ref } from "vue";
import { exportExcelMethod } from '@/utils/excel'
const { tableRef, getSelectionRows, reload } = useTable();

interface Data {
  id: string;
  scName: string;
  shopId: string;
  code: string;
  status: string;
  fdUser: string;
  createTime: string;
}
let arrdata = ref([
  {name: '标题',numberdata:[{tape:'食材类型：',colspan:'1'},{tape:'',},{tape:'打印时间：',},{tape:'',colspan:'2'},{tape:'收获时间',},{tape:'',}]}, 
  {name: '头部',numberdata:[{tape:'序号',colspan:'1'},{tape:'食品食材',},{tape:'规格型号',},{tape:'数量',},{tape:'单价',},{tape:'金额',},{tape:'备注',}]}, 
  {name: '1',numberdata:[{tape:'1',},{tape:'',},{tape:'',},{tape:'',},{tape:'',},{tape:'',},{tape:'',}]},
  {name:'2',numberdata:[{tape:'2',},{tape:'',},{tape:'',},{tape:'',},{tape:'',},{tape:'',},{tape:'',}]},
  {name:'3',numberdata:[{tape:'3',},{tape:'',},{tape:'',},{tape:'',},{tape:'',},{tape:'',},{tape:'',}]},
  {name:'4',numberdata:[{tape:'4',},{tape:'',},{tape:'',},{tape:'',},{tape:'',},{tape:'',},{tape:'',}]},
  {name:'5',numberdata:[{tape:'5',},{tape:'',},{tape:'',},{tape:'',},{tape:'',},{tape:'',},{tape:'',}]},
  {name:'6',numberdata:[{tape:'6',},{tape:'',},{tape:'',},{tape:'',},{tape:'',},{tape:'',},{tape:'',}]},
  {name:'7',numberdata:[{tape:'7',},{tape:'',},{tape:'',},{tape:'',},{tape:'',},{tape:'',},{tape:'',}]},
  {name:'总计',numberdata:[{tape:'本⻚⼩计:￥240.5元（⼤写:贰佰肆拾元伍⻆',colspan:'4'},{tape:'总计:￥267.5元（⼤写:贰佰陆拾柒元伍⻆',colspan:'3'}]},
  {name:'底部',numberdata:[{tape:'采购人：',colspan:'1'},{tape:'',colspan:''},{tape:'送货人：',colspan:'1'},{tape:'',colspan:''},{tape:'验证人：',colspan:'1'},{tape:'',colspan:''}]},
])//定义数组，并初始化

const tableQuery = reactive({
  timeRange: "",
  status: 1,
  beginTime: "",
  endTime: "",
});

const getDiviverList = () => {
  tableQuery.beginTime = tableQuery.timeRange[0];
  tableQuery.endTime = tableQuery.timeRange[1];
  reload();
};
const detailVisible = ref(false);
const code = reactive({
  code: "",
});
//导出
const exportcode = reactive({
  code:''
});
const detailList = ref<divideDetailData[]>([]);
const toOp = (row: Data) => {
  detailVisible.value = true;
  code.code = row.code;
  exportcode.code = row.code;
  queryDivideOrderList(code).then((data) => {
    detailList.value = data;
  });
};
//打印
const showExport = ref(true);
const printlist = () => {

 
};

const exportbtn = () => {  
    const url =  `/assist/export/exportDividerOrderList?code=${code.code}` 
    const myObj = {
      method: 'get',
      url: url,
    }
    exportExcelMethod(myObj)
};

</script>
<style lang="scss" scoped>
@page {
    size: auto;
    margin: 5mm;
  }

table{
      border-collapse: collapse;
      border: 1px solid gray;
      width: 100%;
      font-size: 0.28rem;
      tr{
        width: 100%;
        td{
          text-align: center;
        }
      }
    }
</style>
